<template>
  <div>
      <div class="big">
          <div class="xu">
              <img src="@/assets/indeximg/9.png" alt="">
              <p>降温更需要</p>
              <i>超柔保暖被</i>
          </div>
        <div class="xu">
            <img src="@/assets/indeximg/10.png" alt="">
            <p>喝健康好水</p>
            <i>云米滤水壶</i>
        </div>
         <div class="xu">
            <img src="@/assets/indeximg/11.png" alt="">
            <p>抽壁画音响</p>
            <i>众筹爆品</i>
        </div>
         <div class="xu">
            <img src="@/assets/indeximg/12.png" alt="">
            <p>小米自营</p>
            <i>个护会场</i>
        </div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    .big{
        width: 100%;
        height: 1.7rem;
        display: flex;
        justify-content: space-evenly;
    }
    .big .xu{
        width: 22%;
        height: 0.9rem;
        background-color: #fff;
        text-align: center;
        border-radius: 0.1rem;
        float: left;
    }
    .big .xu img{
        width: 0.6rem;
        height: 0.6rem;
        transform: translateY(-0.3rem);
    }
    .big .xu p{
        font-size:0.1rem ;
        line-height: 0.2rem;
        transform: translateY(-0.7rem);
    }
    .big .xu i{
        width:0.6rem ;
        height:0.14rem ;
        font-size: 0.1rem;
        line-height: 0.14rem;
        font-style: normal;
        display: inline-block;
        border-radius: 0.5rem;
        background-color: #fe8e31;
        color: #fff;
       transform: translateY(-1.65rem);
    }
</style>